import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { toJS } from "mobx"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Select, Input } from "antd"
import IconFont from "component/IconFont"
import moment from "moment"
const { Option } = Select

import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Battery extends Component {
  constructor(props) {
    super(props)
    this.store = this.props.ScreenStore
  }
  handleClick = () => {
    const { confim } = this.store
    confim("alarm")
  }
  async componentWillMount() {}

  render() {
    const {
      fsuList = [],
      fsuInfo,
      currentSuId,
      getFsuInfo,
      setCurrentSuId,
      updateFSU,
      createTime,
      address,
      setAddress,
      message,
      setMessage,
      getRing,
      getLoad,
      getRectifierModule,
      getEnvironment,
      getElectricity,
      getPueChart,
      getBattery,
      getAlarm,
      getAlternatingCurrent,
      getEnergyConservationData,
      reset,
    } = this.store
    const current = fsuList.filter((item) => {
      return item.suID === currentSuId
    })
    return (
      <div styleName="container">
        <div className={styles["select-dev"]}>
          <span className={styles["title"]}>FSU设备</span>
          <Select
            suffixIcon={<IconFont type={"iconzhankai"} />}
            placeholder="请选择FSU设备"
            value={currentSuId || undefined}
            onChange={async (value) => {
              await reset(false, ["fsuList"])
              await getFsuInfo({ suId: value })
              await setCurrentSuId(value)
              getRing()
              getLoad()
              getRectifierModule()
              getEnvironment()
              getElectricity({}, true)
              getBattery()
              getPueChart()
              getEnergyConservationData()
              getAlternatingCurrent()
              getAlarm()
            }}
            getPopupContainer={() => {
              return document.getElementById("custom-select-wrap")
            }}
          >
            {fsuList.map((item, index) => {
              return (
                <Option key={index.toString(36) + index} value={item.suID}>
                  {item.name}
                </Option>
              )
            })}
          </Select>
        </div>
        <div className={styles["site-info"]}>
          <span className={styles["title"]}>站址信息</span>
          <span className={styles["input-wrap"]}>
            <Input
              placeholder={"请输入站址信息"}
              value={address}
              onChange={(e) => {
                setAddress(e.target.value)
              }}
            />
          </span>
          <IconFont
            type={"iconbianji"}
            onClick={() => {
              updateFSU({ address })
            }}
            className={styles["editor"]}
          />
        </div>
        <div className={styles["dev-info"]}>
          <span className={styles["title"]}>设备信息</span>
          <span className={styles["input-wrap"]}>
            <Input
              placeholder={"请输入站址信息"}
              value={message}
              onChange={(e) => {
                setMessage(e.target.value)
              }}
            />
          </span>
          <IconFont
            type={"iconshebeixinxi"}
            onClick={() => {
              updateFSU({ message })
            }}
            className={styles["editor"]}
          />
        </div>
        <div className={styles["time-wrap"]}>
          <span className={styles["title"]}>更新时间</span>
          <span className={styles["time"]}>
            {moment(current[0] ? current[0].updateTime : "").format(
              "YYYY-MM-DD HH:mm:ss"
            )}
          </span>
          <IconFont type={"iconshijian"} className={styles["editor"]} />
        </div>
      </div>
    )
  }
}

export default Battery
